<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>欢迎页面-X-admin2.0</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/xadmin.js"></script>
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<div class="x-nav">
			<span class="layui-breadcrumb">
				<a href="">会员管理</a>
				<a href="">黑名单列表</a>
			</span>
			<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);"
			 title="刷新">
				<i class="layui-icon" style="line-height:30px">ဂ</i></a>
		</div>
		<form class="layui-form" action="" id="searchForm">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">用户名:</label>
					<div class="layui-input-inline">
						<input type="text" name="username" id="username" placeholder="请输入用户名" autocomplete="off" class="layui-input" />
					</div>

					<div class="layui-input-inline">
						<select name="contrller" id="sex">
							<option value="">选择性别</option>
							<option value="1">男</option>
							<option value="0">女</option>
						</select>
					</div>
					<div class="layui-input-inline">
						<button type="button" class="layui-btn" lay-submit onclick="searchForm()">搜索</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</div>

		</form>

		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="able">恢复</a>
	    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">彻底删除</a>
	  </script>
		<table class="layui-table" id="delete" lay-filter="delete">

		</table>
		<script>
			var table;
			layui.use('table', function() {
				table = layui.table;

				//温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
				//详见：https://www.layui.com/doc/modules/table.html#totalRow
				table.render({
					elem: '#delete',
					id: 'userTable',
					url: 'http://localhost:8888/usedcar/user/getDisableUsers?token='+document.cookie.split(";")[0],
					page: true,
					toolbar: '#toolbarDemo',
					title: '用户黑名单表',
					totalRow: true,
					cols: [
						[ {
							field: 'id',
							title: 'ID',
							width: 80,
							sort: true,
						}, {
							field: 'username',
							title: '用户名',
							width: 120
						}, {
							field: 'password',
							title: '密码',
							width: 150,
							templet: function(res) {
								return '<em>' + res.password + '</em>'
							}
						}, {
							field: 'phone',
							title: '手机号码',
							width: 150,
							hide:true
						}, {
							field: 'sex',
							title: '性别',
							width: 80,
							edit: 'text',
						}, {
							field: 'note',
							title: '签名',
							width: 150
						}, {
							field: 'role',
							title: '角色',
							width: 150
						}, {
							fixed: 'right',
							title: '操作',
							toolbar: '#barDemo',
							width: 200
						}]
					],
					done: function(res, curr, count) {
						//如果是异步请求数据方式，res即为你接口返回的信息。
						//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
						//console.log(res);
						//得到当前页码
						//console.log(curr);
						//得到数据总量
						//console.log(count);

						$("[data-field='sex']").children().each(function() {
							if ($(this).text() == '1') {
								$(this).text("男")
							} else if ($(this).text() == '0') {
								$(this).text("女")
							}
						});
					}
				});
				

				//监听行工具事件
				table.on('tool(delete)', function(obj) {
					var data = obj.data; //得到行数据
					var uid = obj.data.id; //得到行数据的id
					var $ = layui.jquery;

					console.log(data);
					if (obj.event === 'able') { //恢复用户
						layer.confirm('真的恢复行么', function(index) {
							//后台恢复数据
							obj.del(); //删除该行数据
							layer.close(index); //关闭弹出框
							$.post("http://localhost:8888/usedcar/user/able?token="+document.cookie.split(";")[0], {
								id: uid
							}, function(response) {
								console.log(response);
								if (response == 1) {
									layer.msg("恢复成功");
								} else if (response == 0) {
									layer.msg("恢复失败");
								}
							})
						});
					} else if (obj.event === 'del') { //删除
						layer.confirm('真的删除行么', function(index) {
							//后台删除数据
							obj.del(); //删除该行数据
							layer.close(index); //关闭弹出框
							$.post("http://localhost:8888/usedcar/user/delete?token="+document.cookie.split(";")[0], {
								id: uid
							}, function(response) {
								console.log(response);
								if (response == 1) {
									layer.msg("删除成功");
								} else if (response == 0) {
									layer.msg("删除失败");
								}
							})
						});
					} 
				});
			});
			/* 提交搜索表单 */
			function searchForm() {
				var username = $("#username").val();
				var sex = $("#sex").val();
				table.reload('userTable', {
					where: {
						username: username,
						sex: sex
					},
					page: {
						curr: 1
					}
				});
			}
		</script>

	</body>

</html>
